<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 表单1
        </el-breadcrumb-item> -->
        <el-breadcrumb-item>员工录入</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="formCentent">
        <div class="form-box">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="员工姓名">
              <!-- <el-input v-model="form.userName"></el-input> -->
              <Qinput v-model="form.userName"  maxlength="20"></Qinput>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio label="0">女</el-radio>
                <el-radio label="1">男</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号码">
              <!-- <el-input
                v-model="form.mobile"
                reg='number'
              ></el-input> -->
              <Qinput
                v-model="form.mobile"
                reg="number"
                maxlength="11"
              ></Qinput>
            </el-form-item>
            <el-form-item label="身份证号码">
              <el-input v-model="form.idCard"></el-input>
            </el-form-item>
            <el-form-item label="身份证地址">
              <!-- <el-input v-model="form.idCardAddr"></el-input> -->
              <Qinput v-model="form.idCardAddr"></Qinput>
            </el-form-item>
            <el-form-item label="应聘岗位">
              <el-input v-model="form.date10"></el-input>
            </el-form-item>

            <!-- <el-form-item label="年龄">
            <el-input v-model="form.age"></el-input>
          </el-form-item> -->
            <!-- <el-form-item label="文化程度">
            <el-input v-model="form.education"></el-input>
          </el-form-item> -->
            <!-- <el-form-item label="工作经历">
              <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" rows="5" v-model="form.date4"></el-input>
            </el-form-item> -->
          </el-form>
        </div>
        <div class="form-box">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="身高">
              <el-input v-model="form.date5"></el-input>
            </el-form-item>
            <el-form-item label="体重">
              <el-input v-model="form.date6"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.date7"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-input v-model="form.birthday"></el-input>
            </el-form-item>
            <el-form-item label="政治面貌">
              <el-input v-model="form.date9"></el-input>
            </el-form-item>
            <el-form-item label="文化程度">
              <el-input v-model="form.education"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="btns">
        <el-button type="primary" @click="onSubmit">表单提交</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { userApi } from "@/api";
export default {
  name: "baseform",
  data() {
    return {
      // options: [
      //   {
      //     value: 'guangdong',
      //     label: '广东省',
      //     children: [
      //       {
      //         value: 'guangzhou',
      //         label: '广州市',
      //         children: [
      //           {
      //             value: 'tianhe',
      //             label: '天河区'
      //           },
      //           {
      //             value: 'haizhu',
      //             label: '海珠区'
      //           }
      //         ]
      //       },
      //       {
      //         value: 'dongguan',
      //         label: '东莞市',
      //         children: [
      //           {
      //             value: 'changan',
      //             label: '长安镇'
      //           },
      //           {
      //             value: 'humen',
      //             label: '虎门镇'
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     value: 'hunan',
      //     label: '湖南省',
      //     children: [
      //       {
      //         value: 'changsha',
      //         label: '长沙市',
      //         children: [
      //           {
      //             value: 'yuelu',
      //             label: '岳麓区'
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ],
      form: {
        userName: "",
        mobile: "",
        idCard: "",
        region: "",
        idCardAddr: "",
        age: "",
        education: "",
        date4: "",
        date5: "",
        date6: "",
        date7: "",
        birthday: "",
        date9: "",
        date10: "",
        education: "",
        delivery: true,
        type: ["步步高"],
        sex: "1",
        desc: "",
        options: [],
      },
    };
  },
  methods: {
    onSubmit() {
      userApi.addUser(this.form).then((res) => {
        if (res) {
          this.$message.success("提交成功！");
        }
      });
    },
  },
};
</script>
<style>
.container {
  height: 100%;
  overflow: hidden;
}
.formCentent {
  display: flex;
}
.form-box {
  width: 40%;
  float: left;
}
.btns {
  text-align: center;
  width: 80%;
}
</style>